<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用纯 CSS 创建一个三角形的原理是什么？</title>
<style type="text/css">
	
</style>
</head>
<body>
<pre>
采用的是相邻边框连接处的均分原理。
将元素的宽高设为0，只设置
border
，把任意三条边隐藏掉（颜色设为
transparent），剩下的就是一个三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
</pre>







<script type="text/javascript">

</script>
</body>
</html>
